// components/ani-marquee/index.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        marqueeValue:{
            type:String,
            value:''
        },
        maxWidth:{
            type:Number,
            value:375
        },
        maxHeight:{
            type:Number,
            value:40
        },
        bgColor:{
            type:String,
            value:'#eee'
        },
        fontColor:{
            type:String,
            value:'#000'
        },
        fontSize:{
            type:Number,
            value:32
        },
        step:{
           type:Number,
           value:3
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        textWidth:0,
        windowWidth:0,
        steps:0,
        marqueeLength:2,
    },
    pageLifetimes:{
        show(){

            this.marqueeintData(this.data.maxWidth/2,0)

            let query = this.createSelectorQuery();
            query.select('#value-width').boundingClientRect((res)=>{

                this.marqueeMove(res.width,this.data.step)
                
            }).exec()
            
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        marqueeMove(textWidth,step){

            this.marqueeintData(-textWidth,step)

            setTimeout(()=>{

              this.marqueeintData(this.data.maxWidth,0)

              this.marqueeMove(textWidth,step)

            },step * (1000 + 30))
        },
        marqueeintData(maxWidth,step){
            this.setData({
                moveX:maxWidth,
                steps:step,
            })
        }
    }
})
